<template>
    <!---案例点击更改背景颜色-->
    <div class="box" @click="onClick" :style="{ background: bgColor }">
        点击数量是：{{ num }}
    </div>
    <!--条件渲染 v-if-->
    <p>您得年龄是：{{ age }}</p>
    <!--v-if当条件不满足得时候 直接从dom中删除 -->
    <p v-if="age>18">可以去看电影了</p>
    <p v-else-if="age>14">可以在家看平板了玩游戏</p>
    <p v-else>回家在吃几年饭吧</p>
</template>
<script setup>
import { ref } from 'vue';

const bgColor = ref("#1b68b7")
const num = ref(0)
const age=ref(15)


const onClick = () => {
    num.value++
    console.log("#" + String(Math.random()).substring(3, 9));
    bgColor.value = "#" + String(Math.random()).substring(3, 9)
}

</script>
<style scoped>
.box {
    width: 200px;
    height: 200px;

}
</style>